import { useAMap } from '@/components/utils/useMap';
import { Button, Input } from 'ant-design-vue';
import { defineComponent, PropType, ref } from 'vue';

export interface PositionType {
  longitude: string | number | undefined;
  latitude: string | number | undefined;
}

export default defineComponent({
  props: {
    keyword: {
      type: String,
    },
    position: {
      type: Object as PropType<PositionType>,
    },
    questionId: [String, Number] as PropType<string | number>,
  },
  emits: ['update:keyword', 'update:position', 'change'],
  setup(props, { emit }) {
    const { keyword, position, questionId } = props;
    const mapContainerId = `map-place-search-container-${questionId}`;
    const currentMap = ref();
    const queryPosition = ref();
    const keywordRef = ref(keyword);
    const positionRef = ref(position);
    //输入提示
    const autoOptions = {
      input: 'inputKeyword',
    };

    const AMapCallback = (context: any) => {
      const { AMap, Map, PlaceSearch } = context;
      currentMap.value = Map;

      // AMap.plugin(['AMap.PlaceSearch', 'AMap.AutoComplete'], () => {
      //   var auto = new AMap.AutoComplete(autoOptions);

      //   queryPosition.value = new AMap.PlaceSearch({
      //     map: currentMap.value,
      //   });

      //   auto.on('select', select); //注册监听，当选中某条记录时会触发
      //   function select(e: any) {
      //     queryPosition.value.setCity(e.poi.adcode);
      //     keywordRef.value = e.poi.name;
      //     queryPosition.value.search(keywordRef.value, queryPositionCallback); //关键字查询查询
      //   }
      // });

      AMap.plugin(['AMap.AutoComplete'], () => {
        var auto = new AMap.AutoComplete(autoOptions);

        queryPosition.value = PlaceSearch;

        auto.on('select', select); //注册监听，当选中某条记录时会触发
        function select(e: any) {
          queryPosition.value.setCity(e.poi.adcode);
          keywordRef.value = e.poi.name;
          queryPosition.value.search(keywordRef.value, queryPositionCallback); //关键字查询查询
        }
      });

      if (keywordRef.value) {
        questionPositionFun();
      }
    };

    const queryPositionCallback = (status: any, result: any) => {
      if (status === 'complete' && result.info === 'OK') {
        if (result.keywordList && result.keywordList.length > 0) {
          keywordRef.value = result.keywordList[0];
        }
        const positionCenter = currentMap.value.getCenter().pos;
        positionRef.value = { longitude: positionCenter[0], latitude: positionCenter[1] };
        emit('update:keyword', keywordRef.value);
        emit('update:position', positionRef.value);
        emit('change', {
          keyword: keywordRef.value,
          ...positionRef.value,
        });
      }
    };

    const questionPositionFun = async () => {
      queryPosition.value.search(keywordRef.value, queryPositionCallback);
    };

    useAMap(mapContainerId, AMapCallback);

    console.log('map-search-keyword mapContainerId:', mapContainerId);
    return () => {
      return (
        <>
          <div class="search-condition-container" style="margin-bottom:16px">
            <Input
              id="inputKeyword"
              placeholder="请输入关键字进行查询"
              style="width: 300px;margin-right:10px"
              v-model:value={keywordRef.value}
            />
            <Button type="primary" onClick={() => questionPositionFun()}>
              查询
            </Button>
          </div>
          <div id={mapContainerId} style="width:100%;height:500px"></div>
        </>
      );
    };
  },
});
